<template>
    <view class="goods_list">
    <!-- 1.0 搜索栏 start -->
    <ygSearch></ygSearch>
    <!-- 1.0 搜索栏 end -->

    <!-- 2.0 tabs start -->
    <u-tabs
      :list="tabs"
      :is-scroll="false"
      :current="current"
      inactive-color="#666"
      active-color="#eb4450"
      @change="onTapsChange"
    ></u-tabs>

     <block v-if="current===0">
      <!-- 综合 -->
      <view class="composite">
        <block
          v-for="item in goods"
          :key="item.goods_id"
        >
       <u-line color="#ccc" />
          <!-- 使用单个商品组件 -->
          <goodsItem :item="item" />
        </block>

      </view>
    </block>

    <block v-else-if="current===1">
      <view class="Sales">销量</view>
    </block>

    <block v-else-if="current===2">
      <view class="price">价格</view>
    </block>
    <!-- 2.0 tabs end -->
     
       <!-- 没有更多数数据提示 -->
        <view v-if="!hasMore">没有更多数据</view>
  </view>
</template>

<script>
/* 
1 用户点击的是哪个种类的商品  商品id
  点击分类页面中的 商品 链接的时候 带上 该分类商品的 id  带到 商品列表页面

2 需要在当前页面 获取到 上一个页面传递过来的数据 

3 发送请求
  1 api 集中管理的文件 在里面写 好 地址 
    

4 分页
  1 先找到滚动条的触底事件 小程序中  生命周期函数中 有 滚动条触底事件  onReachBottom

  2 先判断还有没有下一页数据
    0 如何判断还有没有下一页数据
      1 页容量 页码  总条数  

        总页数 =  Math.ceil( 总条数 42  / 页容量 10 )  4.2


      2 当页面的页码  和 总页数 比较
        当前页码 >= 总页数
        1 没有下一页数据
        2 否则就下一页数据
    1 有 再继续
    2 没有 弹出窗口提示用户 即可

 */
// 全局变量

// 总页数
let TotalPage = 0;

// 请求参数
const Params = {
  // 关键字
  query: "",
  // 分类id
  cid: "",
  // 页码
  pagenum: 1,
  // 页容量 一页有几条数据
  pagesize: 10,
};

export default {
   // id =5 开发的时候 暂时先写死 后期要删除的!!! 
    data() {
    return {
      tabs: [
        {
          name: "综合",
        },
        {
           name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      goods: [],
      // 还有没有更多数据
      hasMore: true,
    };
  },

  // id =5 开发的时候 暂时先写死 后期要删除的!!!
     onLoad({ id }) {
        Params.cid = id;
    // console.log(id);
    // query	否	string	关键字
    // cid	否	string	分类id
    // pagenum	否	number	页码
    // pagesize	否	number	页容量
this.getGoods();
    const params = {
      // 关键字
      query: "",
      // 分类id
      cid: id,
      // 页码
      pagenum: 1,
      // 页容量 一页有几条数据
      pagesize: 10,
    };

    // 发送请求 
        this.getGoods();
  },
  /**
   * 滚动条触底 可以加载下一页数据
   */
  onReachBottom() {
    // 1 判断还有没有下一页数据
    if (Params.pagenum >= TotalPage) {
      // 没有下一页数据了
      // console.log("没有下一页数据了");
      // 两种方式
      // 小程序原生 = uniapp
      // uview
      uni.showToast({
        title: "没有更多数据了",
        icon:"none",
        mask: true,
      });
      // 没有更多数据了
      this.hasMore = false;
    } else {
      // 有下一页数据  修改当前的页码
      Params.pagenum++;

      // 发送真正的请求
       this.getGoods();
    }
  },
    /**
   * 下拉刷新时触发
   */
  async onPullDownRefresh() {
     this.hasMore=true;
    // 1 重置数组
    this.goods = [];
    // 2 重置页码
    Params.pagenum = 1;
    // 3 重新发送请求  异步
    await this.getGoods();
    // 4 关闭下拉效果
    uni.stopPullDownRefresh();
  },
  methods: {
    onTapsChange(index) {
      this.current = index;
    },
     /**
     * 获取商品列表数据
     */
    async getGoods() {
      const { message } = await this.$u.api.getGoods(Params);

      // 当做分页的时候 goods数组 应该要不断追加数据  拼接数组
      this.goods = [...this.goods,...message.goods]; 

      // 计算 总页数
      TotalPage = Math.ceil(message.total / Params.pagesize);
    },
  },
};
</script>
